<template>
    <view class="wrap">
        <u-navbar back-icon-color="#ffffff" :background="{backgroundColor:colors}" :custom-back="backPage">
            <view class="slot-wrap">
                <u-search placeholder="请输入关键字" placeholder-color="#ffffff" placeholder-class="placeholder"
                    :input-style=" {borderBottom:'2rpx solid #FA7298;',color:'#ffffff'}" :showAction="false"
                    :bgColor="colors" v-model="searchContent" height="70" margin="10rpx 0" @clear="clearBookData"
                    search-icon-color="#ffffff" @search="searchBook" @change="changSeachBook">
                </u-search>
            </view>
        </u-navbar>
        <view class="">
            <u-dropdown :active-color="colors" height="60">
                <u-dropdown-item v-model="timeSortVal" title="默认排序" :options="timeSort" @change="changeTimeSort">
                </u-dropdown-item>
                <u-dropdown-item v-model="keywordSortVal" title="关键排序" :options="keywordSort"
                    @change="changeKeywordSort"></u-dropdown-item>
            </u-dropdown>
        </view>

        <block v-if="!seachBookData.length">
            <view class="history" v-if="historyList.length">
                <view class="title">
                    <view class="historyTitle">历史搜索</view>
                    <view class="delete" @tap="deleteSearchHistory">
                        清空
                    </view>
                </view>
                <scroll-view scroll-y class="scrollHistory" style="height: calc(100vh - 500rpx);">
                    <view class="scrollItem" v-for="(item,index) in historyList" :key="index"
                        @tap="btnSearchHistory(item)">
                        <view class="left">
                            <u-icon name="clock"></u-icon>
                            <text>{{item}}</text>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </block>
        <view class="seachContent" v-else>
            <scroll-view scroll-y class="seachBookScroll" style="height: calc(100vh - 250rpx);" enable-flex
                refresher-enabled :refresher-triggered="isRefresh" @scrolltolower="handleTolower()"
                @refresherrefresh="handleRefresh">
                <view class="seachBookScroll_item" v-for="(item,index) in seachBookData" :key="item._id">
                    <view class="title" :style="{backgroundColor:colors}">
                        <text>NO{{index + 1}}</text>
                        <text>{{item.bookname}}</text>
                        <text>{{item.type}}</text>
                    </view>
                    <view class="desc">
                        {{item.zname ? item.zname : '发布于'+$u.timeFormat(item.createTime, 'yyyy年mm月dd日 hh:MM')}}
                    </view>
                    <view class="content">
                        <!-- <rich-text :nodes="item.content"></rich-text> -->
                        <text user-select decode>{{item.content}}</text>
                    </view>
                    <view class="bot" :style="{backgroundColor:colors}">
                        <text>{{item.fromtype}}</text>
                        <text>{{item.author}}</text>
                        <text>共 {{item.word}} 字</text>
                    </view>
                </view>
            </scroll-view>

        </view>
    </view>
</template>

<script>
    import * as cloudApi from '@/utils/cloudApi.js'
    export default {
        data() {
            return {
                userInfo: {},
                colors: null,

                seachBookData: [],
                isRefresh: false, // 标示scroll-view下拉刷新是否被触发
                pgSize: 10,
                historyList: [], // 用户搜索过的记录存放
                searchContent: '', // 用户搜索的内容
                timeSortVal: 1,
                timeSort: [{
                        label: '字数降序',
                        value: 'desc',
                    },
                    {
                        label: '字数升序',
                        value: 'asc',
                    },
                ],
                keywordSortVal: 1,
                keywordSort: [{
                        label: '精确书名',
                        value: 'accurate',
                    },
                    {
                        label: '模糊书名',
                        value: 'vague',
                    },
                    {
                        label: '扫书作者',
                        value: 'author',
                    },
                ],
            }
        },
        onLoad() {
            this.userInfo = uni.getStorageSync("userInfo") || getApp().globalData.userInfo
            this.colors = this.userInfo.themeColors
            this.getUserSearchHistory()
        },
        methods: {
            changeTimeSort(index) {
                console.log(index);
                this.searchBook(index)
            },
            changeKeywordSort(index) {
                console.log(index);
                this.searchBook(index)
            },
            backPage() {
                console.log(111);
                uni.navigateBack({
                    delta: 1,
                })
            },
            clearBookData() {
                this.seachBookData = []
            },
            changSeachBook() {
                if (!this.searchContent) {
                    this.seachBookData = []
                }
            },
            // 读取本地用户搜索记录
            getUserSearchHistory() {
                let userSearchHistory = uni.getStorageSync("userSerachHistory")
                if (userSearchHistory) {
                    this.historyList = userSearchHistory
                }
            },
            searchBook(sort) {

                if (!this.searchContent) return this.$showToast('请输入扫书内容', 'none')
                cloudApi.call({
                    name: "book",
                    data: {
                        api: 'getSeachBook',
                        keyword: this.searchContent,
                        sort,
                        pgSize: this.pgSize
                    },
                    success: res => {
                        console.log(res);
                        if (!res.result.data.length) return this.$showToast('没有查询到相关扫书', 'none')
                        this.seachBookData = res.result.data
                        this.isRefresh = false
                    }
                })
                this.pushSearchHistory(this.searchContent)
            },
            btnSearchHistory(historyName) { // 点击搜索历史记录
                this.pushSearchHistory(historyName)
                this.searchContent = historyName
                this.searchBook()
            },
            // 封装添加历史记录
            pushSearchHistory(searchContent) {
                // 检测它的下标是否不等于-1 证明有已加入的关键字 先删除
                if (this.historyList.indexOf(searchContent) !== -1) {
                    // splice() 移除对应的关键字
                    this.historyList.splice(this.historyList.indexOf(searchContent), 1)
                }
                // 再将用户搜索的关键字添加到搜索记录里
                // unshift() 方法 添加进去， 而且新添加的都排在前面
                this.historyList.unshift(searchContent)
                // 用以用户下次刷新 继续保存
                uni.setStorageSync("userSerachHistory", this.historyList)
            },
            deleteSearchHistory() {
                uni.showModal({
                    content: '确定清空全部历史记录？',
                    confirmText: '清空',
                    confirmColor: '#0099ff',
                    success: (res) => {
                        if (res.confirm) {
                            this.historyList = []
                            uni.removeStorageSync("userSerachHistory")
                        }
                    }
                });

            },
            // 自定义上拉加载
            handleTolower() {
                if (this.seachBookData.length) { // 订单有数据才允许执行加载
                    console.log(this.seachBookData.length);
                    this.pgSize = this.seachBookData.length + 10
                    this.searchBook()

                }
            },
            // 下拉刷新
            handleRefresh() {
                uni.showLoading({
                    title: '正在刷新'
                })
                this.pgSize = 10
                setTimeout(() => {
                    this.searchBook()
                    uni.hideLoading()
                    this.$showToast('刷新成功', 'none')
                }, 1000)
                this.isRefresh = true
            },
        }
    }
</script>

<style lang="scss">
    .wrap {
        margin: 20rpx;

        // 历史记录
        .history {
            // flex-wrap: wrap; // 流式布局
            margin-top: 20rpx;

            .title {

                display: flex;
                justify-content: space-between;
                font-size: 28rpx;
                padding-bottom: 20rpx;

                .historyTitle {
                    color: #000000;
                }

                .delete {
                    color: #ccc;
                }
            }

            .scrollHistory {


                .scrollItem {
                    padding: 20rpx;
                    background-color: #ffffff;
                    box-shadow: 10rpx 10rpx 10px #ccc;

                    .left {
                        text {
                            padding-left: 20rpx;
                        }
                    }
                }
            }
        }

        .seachContent {
            box-shadow: 10rpx 10rpx 10px #ccc;

            .seachBookScroll {
                &_item {
                    background-color: #ffffff;
                    border-radius: 20rpx;
                    margin-bottom: 30rpx;

                    .title {
                        display: flex;
                        justify-content: space-between;
                        height: 70rpx;
                        line-height: 70rpx;
                        padding: 0 30rpx;
                        color: #ffffff;
                        border-radius: 20rpx 20rpx 0 0;
                    }

                    .desc {
                        background-color: #fef8fa;
                        padding: 10rpx;
                        text-align: center;
                        color: #ccc;
                        margin: 20rpx 30rpx 0;
                    }

                    .content {
                        font-size: 24rpx;
                        padding: 30rpx 20rpx;
                    }

                    .bot {
                        display: flex;
                        justify-content: space-between;
                        height: 70rpx;
                        line-height: 70rpx;
                        padding: 0 30rpx;
                        color: #ffffff;
                        border-radius: 0 0 20rpx 20rpx;
                    }
                }


            }
        }
    }

    .slot-wrap {
        display: flex;
        align-items: center;
        /* 如果您想让slot内容占满整个导航栏的宽度 */
        flex: 1;
        /* 如果您想让slot内容与导航栏左右有空隙 */
        padding: 0 30rpx;
    }
</style>
